<template>
  <!-- 导航菜单 -->
  <!-- 主页，通知 排版 头部 -->
  <!-- 通知 每个用户的通知栏是独立的 应该包括发送时间 内容 发送人 -->
  <!-- 调用主页布局 -->
  <!-- 主页主要内容 -->
  <div class="mainBox">
    <!-- 主要内容顶部 -->
    <div class="home-top">
      <!-- 轮播图 -->
      <div class="slideshow">
        <el-carousel type="card">
          <el-carousel-item v-for="item in img" :key="item" style="">
            <img :src="item.url" class="slideshow-img" @click="console.log(item.url + '击该连接会跳到对应课程中')" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 展示 -->
      <div class="zs-code">
        <n-code :hljs="hljs" :code="code" language="python" />
      </div>
    </div>
    <!-- 分割线 -->
    <el-divider content-position="left">
      <el-icon><star-filled /></el-icon>
      <span style="margin-left: 5px;">在线课程</span>
    </el-divider>
    <!-- 放学习资料列表的地方 -->
    <div class="home-centre">
      <!-- 内容居中 左右留白 -->

      <div class="python-table">
        <!-- 如果有课程 -->
        
        <div v-if="courseCard !=[]" style="display: flex; flex-wrap: wrap">
          <!-- 遍历卡片 -->
          <template v-for="item in courseCard" :key="item.id">
            <course-card :courseData="item"
              @click="$router.push({ name: 'Chapter', params: { courseId: item.courseId } })"></course-card>
          </template>
        </div>
        <div v-if="courseCard ==''">
          <el-empty v-if="userStore.userInfo.role == '学生'" description="目前还没有课程，请先加入班级或等待老师发布课程" />
          <el-empty v-if="userStore.userInfo.role == '教师'" description="目前还没有课程，请先创建课程" />
        </div>

        <!-- 分割线 -->
        <el-divider content-position="left">
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <!-- <span style="">推荐视频</span>
        <div style="display: flex; flex-wrap: wrap">
          <template v-for="item in courseCard" :key="item.id">
            <course-card></course-card>
          </template>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import HomeHead from "@/components/HomeHead.vue";
import { ref, reactive, onMounted } from "vue";
import { StarFilled } from "@element-plus/icons-vue";
import CourseCard from "@/components/CourseCard.vue";
import HomeLayout from "@/components/layout/HomeLayout.vue";
import { namespace } from "naive-ui/es/_utils/cssr";
import useUserStore from "@/stores/useUserStore";
const userStore = useUserStore()
import userHttp from "@/api/userHttp";
//导入代码高亮
import hljs from "highlight.js";
//导入代码高亮样式
import "highlight.js/styles/atom-one-dark.css";
//设置页面弹窗
const drawer = ref(false);
const code = ref(`def say_hello():\n    name="say_hello,${userStore.userInfo.nickName}"\n    text="半亩方塘一鉴开，天光云影共徘徊。"\n    print(text,'问渠那得清如许？为有源头活水来。')\nsay_hello()\n\nif __name__ == "__main__":\n    main()`)
const courseCard = ref([]);

// 轮播图数组
const img = reactive([
  { url: "src/assets/img/python1.jpg" },
  { url: "src/assets/img/lbt1.png" },
  { url: "src/assets/img/lbt2.png" },
  { url: "src/assets/img/lbt3.png" },
  { url: "src/assets/img/lbt5.jpg" },
]);

onMounted(() => {
  //getCourseList()
  getUserCourseList()
})

//获取全部课程
const getCourseList = () => {
  userHttp.getCourseList().then((res) => {
    if (res.code == 200) {
      courseCard.value = res.data
    }
  })
}

//获取属于自己的课程 老师自己创建的课程 学生班级的课程   - 
//如果是老师那么就 获取自己创建的课程 userId   -看有没有加入班级 
//如果是学生就回去属于自己班级的课程  role

const getUserCourseList = () => {
  userHttp.getUserCourseList(userStore.userInfo.userId,userStore.userInfo.role).then((res) => {
    if (res.code == 200) {
      courseCard.value = res.data
      console.log("全部课程",res.data)
    }
  })
}


</script>

<style scoped>
/* 该组件的最外面的盒子 */
.mainBox {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

/* 轮播图和公告 */
.home-top {
  height: 300px;
  display: flex;

  align-items: center;
}

/* 轮播图 */
.slideshow {
  flex: 7;
  margin: 10px 30px 0px 30px;
}

/* 轮播图图片 */
.slideshow-img {
  border-radius: 10px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}


/* 公告弹出框 */
.announcement-board {
  overflow: auto;
}

/* 通知 */
.el-alert {
  margin: 2px 0 0;
}

/* 课程主要菜单居中布局 */
.home-centre {
  display: flex;
  justify-content: center;
}

/* 内容表格 */
.python-table {
  /* border: 1px beige solid; */

  width: 90%;
}

.zs-code {
  user-select: none;
  flex: 2;
  border-radius: 10px;
  padding: 10px;
  min-width: 280px;
  margin-right: 20px;
  background: linear-gradient(to right bottom,rgba(231, 173, 216, 0.6),rgb(231, 250, 193,0.5));
  background-color: rgb(236, 244, 219);
}
</style>